import React from 'react'
import { connect } from 'react-redux'

import 'antd/dist/antd.css'
import {
  getInputValueAction,
  getDeleteItemAction,
  getAddItemAction,
} from './store/actionCreators'

import TodoListUI from './TodoListUI'

class TodoList extends React.Component {

  render() {
    const { inputValue, handleInputChange, handleClick, handleDeleteItem, list } = this.props
    return (
      <TodoListUI
        inputValue={inputValue}
        handleInputChange={handleInputChange}
        handleClick={handleClick}
        handleDeleteItem={handleDeleteItem}
        list={list} />
    )
  }
}

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    // 提交输入框的内容到列表中
    handleClick: () => {
      const action = getAddItemAction()
      dispatch(action)
    },
    // 改变输入框内容
    handleInputChange: e => {
      const action = getInputValueAction(e.target.value)
      dispatch(action)
    },
    // 删除列表项
    handleDeleteItem(index) {
      const action = getDeleteItemAction(index)
      dispatch(action)
    }
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(TodoList)
